<template>
  <view class="container disFlx">
    <view
      class="item subtract disFlxCC"
      @click="handleSubtract"
      :style="{ borderColor: subtractColor.color, ...subtractColor }"
    >
      <text class="ali-icon">&#xe729;</text>
    </view>
    <view class="px-12 fz-16 linh-28" :style="{ color: numberColor }">{{ modelValue }}</view>
    <view class="item add disFlxCC" @click="handleAdd" :style="addColor">
      <text class="ali-icon">&#xe727;</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import type { PropType, CSSProperties } from 'vue';

  const props = defineProps({
    modelValue: propTypes.number.def(1),
    subtractColor: {
      type: Object as PropType<CSSProperties>,
      default: () => ({ color: '#dcdee0' }),
    },
    addColor: {
      type: Object as PropType<CSSProperties>,
      default: () => ({ color: '#fff', backgroundColor: '#2878ff' }),
    },
    numberColor: propTypes.string.def('#333'),
    maxNum: propTypes.number.def(99),
    minNum: propTypes.number.def(1)
  });

  const emits = defineEmits(['update:modelValue']);

  function handleAdd() {
    let num = props.modelValue + 1;
    if (num >= props.maxNum) num = props.maxNum
    vibrateShort();
    emits('update:modelValue', num);
  }

  function handleSubtract() {
    let num = props.modelValue - 1;
    if (num <= props.minNum) num = props.minNum
    vibrateShort();
    emits('update:modelValue', num);
  }

  function vibrateShort() {
    try {
      uni.vibrateShort();
    } catch (error) {}
  }
</script>

<style lang="scss" scoped>
  .container {
    .item {
      width: 56rpx;
      height: 56rpx;
      border: 1px solid transparent;
    }

    .subtract {
      border-radius: 12rpx 0px 0px 12rpx;
    }

    .add {
      border-radius: 0px 12rpx 12rpx 0px;
    }
  }
</style>
